<template>
  <div class="card">
    <div
      v-for="item in cardList"
      :key="item.title"
      @click="$router.push(item.to)"
    >
      <img :src="item.img" alt="" />
      <p>
        <span>{{ item.title }}</span>
        <span>{{ item.info }}</span>
      </p>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();

// 卡片数组
let cardList = ref([]);
cardList.value = [
  {
    img: "https://cdn.moguvet.com/custom/front/doctor/text.png",
    title: "快速问医生",
    info: "无需选择 自动匹配",
    to: "/consult/text",
  },
  {
    img: "https://cdn.moguvet.com/custom/front/newConsult/new-tel.png",
    title: "名医电话",
    info: "快速接通 可传图片",
  },
];
</script>
<style scoped>
.card {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.card div {
  width: 290px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 20px;
}
.card div img {
  width: 80px;
  height: 80px;
}
.card div p {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card div p span {
  color: #868686;
  font-style: 32px;
}
.card div p span:nth-of-type(1) {
  font-weight: bolder;
  font-size: 33px;
  color: rgb(68, 68, 68);
}
</style>